<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/ExamSystem/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/ExamSystem/css/bootstrap-admin-theme.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/ExamSystem/js/jquery-3.3.1.min.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ExamSystem/js/bootstrap.min.js" ></script>
    <title>在线考试</title>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class=" navbar-collapse nav-divider">
                    <a class="navbar-brand" href="#"><strong>欢迎使用在线考试系统</strong></a>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                                <!--<i class="glyphicon glyphicon-user" aria-hidden="true"></i>-->欢迎您,
                                <%=request.getSession().getAttribute("ipt_name")%>
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#updateinfo" data-toggle="modal">个人资料</a></li>
                                <li role="presentation" class="divider"></li>
                                <li><a href="#updatepwd" data-toggle="modal">修改密码</a></li>
                                <li role="presentation" class="divider"></li>
                                <li><a href="${pageContext.request.contextPath}/LoginOutServlet">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <!--右边面板-->
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">距离考试结束还有</div>
                        <div class="panel-body" >
                            <div id="timer" name="time" style="margin-left: 450px"></div>
                            <input id="time" value="${time*60*1000}" type="hidden">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading"><span name="paperId">${paperId}</span>、${title}</div>
                        <div class="panel-body">
                            <form action="AnswerServlet" method="post" class="form-horizontal">
                                <c:forEach items="${questionArrayList}" var="choice" >

                                    <span> ${choice.index}、 ${choice.title}</span>
                                    <br />
                                    <br />
                                    <lable>
                                        <p class="sp1"><input type="radio" name="${choice.questionId}" value="1" id="xz${choice.questionId}" />A、${choice.optionA}</p>
                                        <p class="sp1"><input type="radio" name="${choice.questionId}" value="2" id="xz${choice.questionId}"/>B、${choice.optionB}</p>
                                        <p class="sp1"><input type="radio" name="${choice.questionId}" value="3" id="xz${choice.questionId}"/>C、${choice.optionC}</p>
                                        <p class="sp1"><input type="radio" name="${choice.questionId}" value="4" id="xz${choice.questionId}" />D、${choice.optionD}</p>
                                    </lable>
                                    <br />
                                    <br />
                                </c:forEach>
<!--
                                <div class="text-center">
                                    <nav>
                                        <ul class="pagination">
                                            <li class="page-item"><a class="page-link" href="<c:url value="${pageContext.request.contextPath}/ShowQuestionServlet?page=1"/>">首页</a></li>
                                            <li class="page-item"><a class="page-link" href="<c:url value="${pageContext.request.contextPath}/ShowQuestionServlet?page=${page-1>1?page-1:1}"/>">&laquo;</a>
                                            </li>

                                            <c:forEach begin="1" end="${totalPages}" varStatus="loop">
                                                <c:set var="active" value="${loop.index==page?'active':''}"/>
                                                <li class="page-item ${active}">
                                                    <a class="page-link" href="<c:url value="${pageContext.request.contextPath}/ShowQuestionServlet?page=${loop.index}"/>">${loop.index}</a>
                                                </li>
                                            </c:forEach>
                                            <li class="page-item">
                                                <a class="page-link" href="<c:url value="${pageContext.request.contextPath}/ShowQuestionServlet?page=${page+1<totalPages?page+1:totalPages}"/>">&raquo;</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="<c:url value="${pageContext.request.contextPath}/ShowQuestionServlet?page=${totalPages}"/>">尾页</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
-->
                                <div class="text-center form-group">
                                    <button type="submit" class="btn btn-primary" id="btn_query">交卷离开</button>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--个人资料-->
<!-- 模态框（Modal） -->
<form  class="form-horizontal"  method="post" action="${pageContext.request.contextPath}/uNameAndSexServlet">
    <div class="modal fade" id="updateinfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        个人资料
                    </h4>
                </div>
                <div class="modal-body">

                    <!--正文-->
                    <input type="hidden" name="tip" value="2" />
                    <input type="hidden" name="url" value="index" />
                    <div class="form-group">
                        <label for="" class="col-sm-3 control-label">真实姓名</label>
                        <div class="col-lg-7">
                            <input type="text" class="form-control" id="name" name="name" placeholder="请输入您的真实姓名" value="" />
                            <label class="control-label" for="name" style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-3 control-label">性别</label>
                        <div class="col-lg-7">
                            <input type="text" class="form-control" id="sex" name="sex" placeholder="请输入您的性别" value="" />
                            <label class="control-label" for="sex" style="display: none;"></label>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary">
                        修改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</form>

<!--修改密码-->
<!-- 模态框（Modal） -->
<form  class="form-horizontal"  method="post" action="${pageContext.request.contextPath}/uPasswordServlet">
    <div class="modal fade" id="updatepwd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改密码
                    </h4>
                </div>
                <div class="modal-body">

                    <!--正文-->
                    <input type="hidden" name="tip" value="1" />
                    <input type="hidden" name="url" value="index" />
                    <div class="form-group">
                        <label for="" class="col-sm-3 control-label">原密码</label>
                        <div class="col-lg-7">
                            <input type="password" class="form-control" id="oldPwd" name="password" placeholder="请输入原密码" value="" />
                            <label class="control-label" for="name" style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-3 control-label">新密码</label>
                        <div class="col-lg-7">
                            <input type="password" class="form-control" id="newPwd" name="password2" placeholder="请输入新密码" value="" />
                            <label class="control-label" for="name" style="display: none;"></label>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary">
                        修改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</form>

<script language="JavaScript">
    var dataLis = [

    ]

    $(function () {

        //获取用户数据
        function getData(object,url) {
            $.ajax({
                url: url,
                type: "get",
                data: dataObject,
                traditional: true,
                success: function (data) {

                }
            });
        }

        //获取页码数据
        function getPage(index) {
            getData($(this), "${pageContext.request.contextPath}/ShowQuestionServlet?page=" + index);
        }
    })


    var time = $("#time").val();

    var zongtime1 = 0;//定义递归用的传递实参
    function startTime(oper) {

        var zongtime = oper//这是总共有多少时间我们换算成毫秒
        if (oper > 0) {
            var ohor = Math.floor(zongtime / (60 * 60 * 1000));
            //把总的时间换算出到底有多少小时

            var mine = Math.floor((zongtime - (ohor * 60 * 60 * 1000)) / (60 * 1000));
            //除去小时的时间有多少分钟
            var ss = (Math.floor(zongtime / 1000)) % 60;

        }

        msg = ohor + " 小时 " + mine + " 分钟 " + ss + " 秒 ";
        document.all["timer"].innerHTML = msg;

        zongtime1 = zongtime - 1000;
        var stti = setTimeout("startTime(zongtime1)", 1000); //每隔一秒递归调用


        if (mine == 5) {
            alert('注意，还有5分钟!');
        }

        if(zongtime == 0){
            msg = 0 + " 小时 " + 0 + " 分钟 " + 0 + " 秒 ";
            document.all["timer"].innerHTML = msg;

            //当时间减为0时把stti 清空
            clearTimeout(stti);
            alert("时间到，请提交试卷");

            document.forms[0].submit();
        }
    }
    startTime(time);


</script>
</body>
</html>